<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="close">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="监控人员" prop="fundtype">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >
          全选 &nbsp;&nbsp;&nbsp;(选择当前分组将会自动选择组下所有人员)
        </el-checkbox>
        <div style="margin: 15px 0"></div>
        <!-- <el-checkbox-group
          v-model="form.checkedValue"
          @change="handleCheckedChange"
        >
          <el-checkbox v-for="(e, index) in peoples" :label="e.id" :key="index">
            {{ e.nickname }}
          </el-checkbox>
        </el-checkbox-group> -->
        <div>
          <tree
            :nodes="nodes"
            class="tree max-300"
            ref="treeAuth"
            :setting="setting"
            @onCreated="handleCreated"
          />
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button @loading="loading" type="primary" @click="save">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { doEdit, getUserlist } from '@/api/userManagement'
  import { getGrouplist } from '@/api/ad'
  import tree from 'vue-giant-tree'
  export default {
    components: { tree },
    data() {
      return {
        loading: false,
        ztreeObj: null,
        setting: {
          check: {
            enable: true,
          },
          data: {
            simpleData: {
              enable: true,
              pIdKey: 'pid',
            },
          },
          view: {
            showIcon: false,
            addHoverDom: this.addHoverDom,
            removeHoverDom: this.removeHoverDom,
          },
        },
        form: {
          checkedValue: [],
        },
        isIndeterminate: false,
        checkAll: false,
        title: '',
        grouplist: [],
        nodes: [],
        peoples: [],
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      handleCheckAllChange(val) {
        val
          ? this.ztreeObj.checkAllNodes(true)
          : this.ztreeObj.checkAllNodes(false)
        this.isIndeterminate = false
      },
      handleCheckedChange() {},
      showEdit(row) {
        if (!row.id) {
          this.title = '设置监控人员'
        } else {
          this.form.jid = row.id
          if (row.userlists) {
            this.form.checkedValue = row.userlists
              .split(',')
              .map((item) => Number(item))
          }

          this.title = '设置监控人员'
        }
        this.form = Object.assign(this.form, row)
        this.getGroupListData()
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      // async getUsers() {
      //   this.grouplist.forEach(async (dc) => {
      //     const res = await getUserlist({ groupid: dc.id })
      //     const maps = res.data.map((item) => {
      //       item.name = item.username
      //       item.id = `userid_${item.id}`
      //       item.pid = dc.id
      //       item.url = ''
      //       return item
      //     })
      //     this.nodes.push(...maps)
      //   })
      // },
      getGroupListData() {
        getGrouplist({})
          .then((res) => {
            this.nodes = res.data.map((item, index) => {
              const idx = this.form.checkedValue.findIndex(
                (it) => it == item.id
              )

              let datac = {}
              if (idx >= 0) {
                datac.checked = true
              }
              datac.id = item.id
              datac.pid = ''
              datac.name = item.gname
              return datac
            })
            this.grouplist = res.data

            // this.getUsers()
          })
          .catch((ret) => {
            console.log(ret)
          })
      },
      handleCreated: function (ztreeObj) {
        this.ztreeObj = ztreeObj
        ztreeObj.expandNode(ztreeObj.getNodes()[0], true)
        this.ztreeObj.selectNode(this.ztreeObj.getNodes()[0], true)
      },
      async save() {
        let checks = this.ztreeObj.getCheckedNodes()
        if (checks.length == 0) {
          this.$baseMessage('未选择分组', 'error')
          return
        }
        this.loading = true
        const res = await doEdit({
          ...this.form,
          jid: this.form.id,
          userlists: checks.map((item) => item.id).join(','),
        })
        this.$baseMessage('操作成功!', 'success')
        this.loading = false
        this.close()
        this.$emit('fetch-data')
      },
    },
  }
</script>
<style lang="scss" scoped>
  .max-300 {
    max-height: 250px;
    overflow-y: auto;
  }
</style>
